<template>
	<view>
		<!-- 评分 + 标签 -->
		<view class="top">
			<view class="summary u-flex">
				<view class="rate">
					<text>综合评分：</text>
					<u-rate :count="5" :current="rate.score" size="26" disabled active-color="#f1c158"></u-rate>
				</view>
				<view class="satisfaction">
					<text>{{ rate.positive || 0 }}%</text>
					<text>满意</text>
				</view>
			</view>
			<view class="tag-box">
				<view class="tags u-flex" :style="{ height: tags.height }">
					<text :class="['item', { active: item.id == queryInfo.cid ? true : false }]" v-for="item in tags.list" :key="item.id" @click="activeTag(item.id)">
						{{ item.name }}({{ item.count }})
					</text>
				</view>
				<view class="arrow u-flex" @click="showMoreTags">
					<image src="/static/icon/arrow_down_lightgray.png" v-show="!tags.showAll"></image>
					<image src="/static/icon/arrow_up_lightgray.png" v-show="tags.showAll"></image>
				</view>
			</view>
		</view>
		<!-- 评价列表 -->
		<view>
			<view class="comment" v-for="(item, index) in commentList" :key="index">
				<view class="head u-flex">
					<image :src="item.avatar || 'https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_userhead.png'" mode="aspectFit"></image>
					<view class="desc">
						<view class="u-flex">
							<text class="user">{{ item.nick_name }}</text>
							<u-rate :count="5" :current="item.score" size="26" disabled active-color="#f1c158"></u-rate>
							<text class="time">{{ item.ctime | date('yyyy.mm.dd') }}</text>
						</view>
						<view class="goods">
							<!-- 商品只有一个规格时，没有spec属性，所以显示商品name -->
							<text>已选：{{ item.pid_spec || item.pid_name }}</text>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="txt u-line-5">{{ item.text }}</view>
					<view class="img u-flex">
						<view class="item" v-for="(sitem, sindex) in item.pics" :key="sindex" @click="previewImg(item.pics)">
							<u-lazy-load :image="sitem" loading-img="/static/lazy/goods-lazy-load.png" img-mode="aspectFill" height="180" border-radius="8"></u-lazy-load>
						</view>
					</view>
					<view class="reply" v-if="item.reply_list" v-for="(sitem, sindex) in item.reply_list" :key="sindex">
						<view class="title u-flex">
							<text>商家回复</text>
							<text>{{ sitem.ctime | date('yyyy.mm.dd') }}</text>
						</view>
						<view class="detail">{{ sitem.text }}</view>
						<view class="triangle"></view>
					</view>
					<view class="append" v-if="item.append">
						<view class="append-time">购买{{ item.append && item.append.ctime, item.order_create_time | timeDif }}天后追评</view>
						<view class="txt u-line-5">{{ item.append.text }}</view>
						<view class="img u-flex">
							<view class="item" v-for="(titem, tindex) in item.append.imgs" :key="tindex">
								<u-lazy-load :image="titem.img" loading-img="/static/lazy/goods-lazy-load.png" img-mode="aspectFill" height="180" border-radius="8"  @click="previewImg(titem.img)"></u-lazy-load>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-loadmore :status="loadingStatus" :margin-top="30" :margin-bottom="40" bg-color="#f4f4f4" :font-size="24" color="#999" :load-text="loadingText" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			queryInfo: {
				gid: 0,
				cid: '__all__',
				pindex: 1,
				psize: 10,
				total: 0
			},
			rate: {},
			tags: {
				list: [],
				showAll: false,
				height: '50rpx'
			},
			commentList: [],
			loadingStatus: 'loadmore',
			loadingText: {
				loadmore: '上拉加载更多',
				loading: '努力加载中~',
				nomore: '没有更多评论了'
			}
		}
	},
	onLoad(e) {
		this.queryInfo.gid = parseInt(e.gid)
		this.queryInfo.cid = e.cid
		this.getTags()
		this.getComment()
	},
	methods: {
		showMoreTags() {
			if (!this.tags.showAll) {
				this.tags.showAll = true
				this.tags.height = 'auto'
			} else {
				this.tags.showAll = false
				this.tags.height = '50rpx'
			}
		},
		getTags() {
			this.$u.api.commentTag({gid:this.queryInfo.gid}).then(res => {
				this.rate.score = res.data.avg_score
				this.rate.positive = res.data.positive_rate
				this.tags.list = res.data.tags
			})
		},
		activeTag(id) {
			this.queryInfo.cid = id
			this.queryInfo.pindex = 1
			this.getComment('new')
		},
		getComment(type = 'new') {
			let data = {
				page: this.queryInfo.pindex,
				pageSize: this.queryInfo.psize,
				gid: this.queryInfo.gid,
				tagId: this.queryInfo.cid
			}
			this.$u.api.commentContent(data).then(res => {
				if (type == 'new') {
					this.commentList = res.data.list
				} else if (type == 'more') {
					res.data.list.forEach(x => {
						this.commentList.push(x)
					})
				}
				// 处理页面下方的加载更多显示状态
				this.queryInfo.total = res.data.page.total
				if (this.queryInfo.total <= this.queryInfo.psize) {
					this.loadingStatus = 'nomore'
				} else {
					this.loadingStatus = 'loadmore'
				}
			})
		},
		// 预览大图
		previewImg(url) {
			if (typeof url == 'string') {
				url = url.split()
			}
			uni.previewImage({
				urls: url,
				fail: () => {
					this.$refs.uToast.show({
						title: `图片预览失败，请稍后再试`,
						type: 'error'
					})
				}
			})
		}
	},
	// 触底加载
	onReachBottom() {
		if (this.queryInfo.total > this.queryInfo.pindex * this.queryInfo.psize) {
			this.queryInfo.pindex++
			this.getComment('more')
			this.loadingStatus = 'loading'
		} else {
			this.loadingStatus = 'nomore'
		}
	},
	// 过滤器
	filters: {
		timeDif(endTime, beginTime) {
			return parseInt((endTime - beginTime) / 86400)
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
}
.top {
	padding: 0 20rpx;
	.summary {
		justify-content: space-between;
		height: 100rpx;
		font-size: 26rpx;
		color: #555;
		.satisfaction {
			font-size: 24rpx;
			color: #999;
			text {
				margin-left: 6rpx;
			}
		}
	}
	.tag-box {
		.tags {
			flex-wrap: wrap;
			overflow: hidden;
			.item {
				display: inline-block;
				margin: 0 24rpx 16rpx 0;
				padding: 6rpx 16rpx;
				font-size: 22rpx;
				color: #444;
				background-color: rgb(244, 231, 206);
				border-radius: 30rpx;
			}
			.active {
				background-color: #e2b85c;
				color: #fff;
			}
		}
		.arrow {
			// margin: 16rpx 0;
			height: 46rpx;
			justify-content: center;
			image {
				width: 26rpx;
				height: 14rpx;
			}
		}
	}
}
.comment {
	width: 710rpx;
	margin: 0 auto 20rpx;
	padding: 24rpx;
	font-size: 24rpx;
	border-radius: 12rpx;
	background-color: #fff;
	.head {
		color: #999;
		image {
			height: 62rpx;
			width: 62rpx;
			min-width: 62rpx;
			border-radius: 31rpx;
		}
		.desc {
			justify-content: space-between;
			margin-left: 16rpx;
			flex: 1;
			.user {
				margin-right: 10rpx;
				font-size: 26rpx;
				color: #444;
			}
			.time {
				margin-left: auto;
			}
			.goods {
				font-size: 22rpx;
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
	.content {
		margin-top: 20rpx;
		padding-left: 78rpx;
		.txt {
			color: #555;
			line-height: 36rpx;
		}
		.img {
			flex-wrap: wrap;
			width: 100%;
			margin-bottom: 20rpx;
			.item {
				margin-top: 20rpx;
				margin-right: 15rpx;
				width: 180rpx;
				height: 180rpx;
			}
		}
		.reply {
			position: relative;
			margin-top: 40rpx;
			padding: 20rpx 30rpx 30rpx;
			border-radius: 8rpx;
			background-color: #f8f8f8;
			.title {
				justify-content: space-between;
				color: #999;
			}
			.detail {
				margin-top: 10rpx;
				color: #555;
				line-height: 36rpx;
			}
			.triangle {
				position: absolute;
				top: 0;
				left: 20rpx;
				width: 28rpx;
				height: 28rpx;
				background-color: #f8f8f8;
				transform: rotate(45deg) translateY(-50%);
				z-index: 1;
			}
		}
		.append {
			.append-time {
				color: #d3ac56;
				margin: 30rpx 0 20rpx;
			}
		}
	}
}
</style>
